<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AeroSentinel - 环境监测系统</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.1/dist/chartjs-adapter-moment.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-2 sidebar">
                <div class="sidebar-header">
                    <h3>AeroSentinel</h3>
                    <p>环境监测系统</p>
                </div>
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="#dashboard" data-bs-toggle="tab">
                            <i class="bi bi-speedometer2"></i> 仪表盘
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#devices" data-bs-toggle="tab">
                            <i class="bi bi-cpu"></i> 设备管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#analysis" data-bs-toggle="tab">
                            <i class="bi bi-graph-up"></i> 数据分析
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#reports" data-bs-toggle="tab">
                            <i class="bi bi-file-earmark-text"></i> 分析报告
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#settings" data-bs-toggle="tab">
                            <i class="bi bi-gear"></i> 设置
                        </a>
                    </li>
                </ul>
                <div class="sidebar-footer">
                    <button id="logoutBtn" class="btn btn-outline-light btn-sm">
                        <i class="bi bi-box-arrow-right"></i> 退出登录
                    </button>
                </div>
            </div>

            <!-- 主内容区 -->
            <div class="col-md-10 main-content">
                <div class="top-bar">
                    <div class="user-info">
                        <span id="currentUser">未登录</span>
                        <span class="separator">|</span>
                        <span id="lastUpdate">最后更新: --</span>
                    </div>
                </div>

                <div class="tab-content">
                    <!-- 仪表盘 -->
                    <div class="tab-pane fade show active" id="dashboard">
                        <div class="section-header">
                            <h2>环境监测仪表盘</h2>
                            <div class="controls">
                                <select id="deviceSelect" class="form-select">
                                    <option value="">选择设备</option>
                                </select>
                                <select id="timeRange" class="form-select">
                                    <option value="1">最近24小时</option>
                                    <option value="7" selected>最近7天</option>
                                    <option value="30">最近30天</option>
                                </select>
                                <button id="refreshBtn" class="btn btn-primary">
                                    <i class="bi bi-arrow-clockwise"></i> 刷新
                                </button>
                            </div>
                        </div>

                        <div class="metrics-container">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="metric-card" id="temperatureCard">
                                        <div class="metric-icon">
                                            <i class="bi bi-thermometer-half"></i>
                                        </div>
                                        <div class="metric-info">
                                            <h3>温度</h3>
                                            <div class="metric-value" id="temperatureValue">--°C</div>
                                            <div class="metric-status" id="temperatureStatus"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="metric-card" id="humidityCard">
                                        <div class="metric-icon">
                                            <i class="bi bi-droplet-half"></i>
                                        </div>
                                        <div class="metric-info">
                                            <h3>湿度</h3>
                                            <div class="metric-value" id="humidityValue">--%</div>
                                            <div class="metric-status" id="humidityStatus"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="metric-card" id="pm25Card">
                                        <div class="metric-icon">
                                            <i class="bi bi-cloud-haze"></i>
                                        </div>
                                        <div class="metric-info">
                                            <h3>PM2.5</h3>
                                            <div class="metric-value" id="pm25Value">-- μg/m³</div>
                                            <div class="metric-status" id="pm25Status"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="metric-card" id="co2Card">
                                        <div class="metric-icon">
                                            <i class="bi bi-cloud"></i>
                                        </div>
                                        <div class="metric-info">
                                            <h3>CO₂</h3>
                                            <div class="metric-value" id="co2Value">-- ppm</div>
                                            <div class="metric-status" id="co2Status"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row mt-4">
                                <div class="col-md-3">
                                    <div class="metric-card" id="ozoneCard">
                                        <div class="metric-icon">
                                            <i class="bi bi-layers"></i>
                                        </div>
                                        <div class="metric-info">
                                            <h3>臭氧</h3>
                                            <div class="metric-value" id="ozoneValue">-- ppb</div>
                                            <div class="metric-status" id="ozoneStatus"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="metric-card" id="nitroDioCard">
                                        <div class="metric-icon">
                                            <i class="bi bi-wind"></i>
                                        </div>
                                        <div class="metric-info">
                                            <h3>二氧化氮</h3>
                                            <div class="metric-value" id="nitroDioValue">-- ppb</div>
                                            <div class="metric-status" id="nitroDioStatus"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="metric-card" id="methanalCard">
                                        <div class="metric-icon">
                                            <i class="bi bi-exclamation-triangle"></i>
                                        </div>
                                        <div class="metric-info">
                                            <h3>甲醛</h3>
                                            <div class="metric-value" id="methanalValue">-- mg/m³</div>
                                            <div class="metric-status" id="methanalStatus"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="metric-card" id="carbMomoCard">
                                        <div class="metric-icon">
                                            <i class="bi bi-exclamation-octagon"></i>
                                        </div>
                                        <div class="metric-info">
                                            <h3>一氧化碳</h3>
                                            <div class="metric-value" id="carbMomoValue">-- ppm</div>
                                            <div class="metric-status" id="carbMomoStatus"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="charts-container mt-4">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="chart-wrapper">
                                        <h3>温度趋势</h3>
                                        <canvas id="temperatureChart"></canvas>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="chart-wrapper">
                                        <h3>湿度趋势</h3>
                                        <canvas id="humidityChart"></canvas>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-4">
                                <div class="col-md-6">
                                    <div class="chart-wrapper">
                                        <h3>PM2.5趋势</h3>
                                        <canvas id="pm25Chart"></canvas>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="chart-wrapper">
                                        <h3>CO₂趋势</h3>
                                        <canvas id="co2Chart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 设备管理 -->
                    <div class="tab-pane fade" id="devices">
                        <div class="section-header">
                            <h2>设备管理</h2>
                            <div class="controls">
                                <button id="addDeviceBtn" class="btn btn-primary">
                                    <i class="bi bi-plus-circle"></i> 添加设备
                                </button>
                            </div>
                        </div>
                        
                        <div class="device-list">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>设备ID</th>
                                        <th>设备名称</th>
                                        <th>位置</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="deviceTableBody">
                                    <!-- 设备列表将通过JavaScript动态加载 -->
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 数据分析 -->
                    <div class="tab-pane fade" id="analysis">
                        <div class="section-header">
                            <h2>数据分析</h2>
                            <div class="controls">
                                <select id="analysisDeviceSelect" class="form-select">
                                    <option value="">选择设备</option>
                                </select>
                                <select id="analysisType" class="form-select">
                                    <option value="simple">简单分析</option>
                                    <option value="anomaly">异常检测</option>
                                    <option value="trend">趋势预测</option>
                                    <option value="comprehensive">综合报告</option>
                                </select>
                                <select id="analysisTimeRange" class="form-select">
                                    <option value="1">最近24小时</option>
                                    <option value="7" selected>最近7天</option>
                                    <option value="30">最近30天</option>
                                </select>
                                <button id="runAnalysisBtn" class="btn btn-primary">
                                    <i class="bi bi-play-fill"></i> 运行分析
                                </button>
                            </div>
                        </div>
                        
                        <div class="analysis-result">
                            <div class="card">
                                <div class="card-header">
                                    <h3 id="analysisTitle">分析结果</h3>
                                    <span id="analysisTime"></span>
                                </div>
                                <div class="card-body">
                                    <div id="analysisContent" class="analysis-content">
                                        <p class="text-muted">请选择设备和分析类型，然后点击"运行分析"按钮。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 分析报告 -->
                    <div class="tab-pane fade" id="reports">
                        <div class="section-header">
                            <h2>历史分析报告</h2>
                            <div class="controls">
                                <select id="reportDeviceSelect" class="form-select">
                                    <option value="">所有设备</option>
                                </select>
                                <select id="reportTypeSelect" class="form-select">
                                    <option value="">所有类型</option>
                                    <option value="simple">简单分析</option>
                                    <option value="anomaly">异常检测</option>
                                    <option value="trend">趋势预测</option>
                                    <option value="comprehensive">综合报告</option>
                                </select>
                                <button id="refreshReportsBtn" class="btn btn-primary">
                                    <i class="bi bi-arrow-clockwise"></i> 刷新
                                </button>
                            </div>
                        </div>
                        
                        <div class="reports-list">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>报告ID</th>
                                        <th>设备ID</th>
                                        <th>报告类型</th>
                                        <th>时间范围</th>
                                        <th>生成时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="reportsTableBody">
                                    <!-- 报告列表将通过JavaScript动态加载 -->
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 设置 -->
                    <div class="tab-pane fade" id="settings">
                        <div class="section-header">
                            <h2>系统设置</h2>
                        </div>
                        
                        <div class="settings-container">
                            <div class="card">
                                <div class="card-header">
                                    <h3>用户信息</h3>
                                </div>
                                <div class="card-body">
                                    <form id="userInfoForm">
                                        <div class="mb-3">
                                            <label for="username" class="form-label">用户名</label>
                                            <input type="text" class="form-control" id="username" readonly>
                                        </div>
                                        <div class="mb-3">
                                            <label for="currentPassword" class="form-label">当前密码</label>
                                            <input type="password" class="form-control" id="currentPassword">
                                        </div>
                                        <div class="mb-3">
                                            <label for="newPassword" class="form-label">新密码</label>
                                            <input type="password" class="form-control" id="newPassword">
                                        </div>
                                        <div class="mb-3">
                                            <label for="confirmPassword" class="form-label">确认新密码</label>
                                            <input type="password" class="form-control" id="confirmPassword">
                                        </div>
                                        <button type="submit" class="btn btn-primary">更新密码</button>
                                    </form>
                                </div>
                            </div>
                            
                            <div class="card mt-4">
                                <div class="card-header">
                                    <h3>系统偏好设置</h3>
                                </div>
                                <div class="card-body">
                                    <form id="preferencesForm">
                                        <div class="mb-3">
                                            <label for="theme" class="form-label">主题</label>
                                            <select class="form-select" id="theme">
                                                <option value="light">浅色</option>
                                                <option value="dark">深色</option>
                                                <option value="system">跟随系统</option>
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label for="dataRefreshInterval" class="form-label">数据刷新间隔 (秒)</label>
                                            <input type="number" class="form-control" id="dataRefreshInterval" min="30" value="60">
                                        </div>
                                        <button type="submit" class="btn btn-primary">保存设置</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 登录模态框 -->
    <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="loginModalLabel">登录</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <!-- 在登录模态框中修改 -->
                <div class="modal-body">
                    <form id="loginForm">
                        <div class="mb-3">
                            <label for="loginUsername" class="form-label">设备ID</label>
                            <input type="text" class="form-control" id="loginUsername" placeholder="例如：CQUCHX0503001" required>
                        </div>
                        <div class="mb-3">
                            <label for="loginPassword" class="form-label">设备密钥</label>
                            <input type="password" class="form-control" id="loginPassword" placeholder="例如：lAJIOxHiUyp2GuoN" required>
                        </div>
                        <div class="alert alert-danger d-none" id="loginError"></div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="loginSubmitBtn">登录</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加设备模态框 -->
    <div class="modal fade" id="addDeviceModal" tabindex="-1" aria-labelledby="addDeviceModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addDeviceModalLabel">添加设备</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addDeviceForm">
                        <div class="mb-3">
                            <label for="deviceId" class="form-label">设备ID</label>
                            <input type="text" class="form-control" id="deviceId" required>
                        </div>
                        <div class="mb-3">
                            <label for="deviceName" class="form-label">设备名称</label>
                            <input type="text" class="form-control" id="deviceName" required>
                        </div>
                        <div class="mb-3">
                            <label for="deviceLocation" class="form-label">设备位置</label>
                            <input type="text" class="form-control" id="deviceLocation">
                        </div>
                        <div class="mb-3">
                            <label for="deviceSecret" class="form-label">设备密钥</label>
                            <input type="text" class="form-control" id="deviceSecret" required>
                        </div>
                        <div class="alert alert-danger d-none" id="addDeviceError"></div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="addDeviceSubmitBtn">添加</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 查看报告模态框 -->
    <div class="modal fade" id="viewReportModal" tabindex="-1" aria-labelledby="viewReportModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewReportModalLabel">查看报告</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="report-header">
                        <div><strong>报告ID:</strong> <span id="reportId"></span></div>
                        <div><strong>设备ID:</strong> <span id="reportDeviceId"></span></div>
                        <div><strong>报告类型:</strong> <span id="reportType"></span></div>
                        <div><strong>时间范围:</strong> <span id="reportTimeRange"></span></div>
                        <div><strong>生成时间:</strong> <span id="reportGeneratedAt"></span></div>
                    </div>
                    <hr>
                    <div id="reportContent" class="report-content"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="downloadReportBtn">下载报告</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>